<template>
  <div>
   <van-nav-bar @click-left="$router.go(-1)" :title="$route.name" left-arrow />
         
         <div class="imgurl">
           <img src="../assets/img/orange.png" alt="">
         </div>
    <van-form @submit="login"  submit-on-enter default>
      <van-field
      autocomplete="off"
        v-model="loginList.phone"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, validator, message: '请输入正确手机号' }]"
      />

      <van-field
        v-model="loginList.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
        <van-button class="zc" @click="goregister" round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from "../util/axios";
import { Toast } from "vant";
import {mapActions}  from 'vuex'

export default {
  data() {
    return {
      loginList: {
        phone: "",
        password: "",
      },
    };
  },
  components: {},
  methods: {
     ...mapActions(['changeUserAction']),   
    login() {
    
      login(this.loginList)
      .then((res) => {
        if (res.code == 200) {

          this.changeUserAction(res.list)
          Toast.success(res.msg);
          this.$router.push('/mine')
              
          console.log(res);
        } 
        else {
          Toast.fail(res.msg);
          console.log(res);
        }
      });
    },

    goregister(){
       this.$router.push('/register')
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
  },
};
</script>

<style lang="" scoped>

.imgurl{
  position: absolute;
  top: 25%;
  left: 25%;
}
.van-nav-bar{
   background-color: rgb(255, 96, 64);;
}
.van-form{

  position: absolute;
  top: 40%;
  left: 10%;
}
.zc{
  margin-top: .1rem;
}

</style>
